<template>
    <div>
        <el-row class="title">
            账号管理
        </el-row>
        <el-button type="primary" style="margin-bottom: 20px;" @click="addFormVisible = true">添加</el-button>
        <el-table
                :data="this.$store.state.user"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    type="index"
                    label="序号"
                    width="200"/>
            <el-table-column
                    prop="user_id"
                    v-if="false"/>
            <el-table-column
                    prop="user_account"
                    label="账号"
                    width="500"/>
            <el-table-column
                    prop="user_name"
                    label="姓名"
                    width="300"/>
            <el-table-column
                    prop="role_name"
                    label="角色"
                    width="300"/>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="updateClick(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="delClick(scope.row.user_id)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- Add Form -->
        <el-dialog title="新建账号" :visible.sync="addFormVisible">
            <el-form :model="addForm">
                <el-form-item label="账号" label-width="15%">
                    <el-input v-model="addForm.account" style="width: 50%"/>
                </el-form-item>
                <el-form-item label="姓名" label-width="15%">
                    <el-input v-model="addForm.name" style="width: 50%"/>
                </el-form-item>
                <el-form-item label="密码" label-width="15%">
                    <el-input v-model="addForm.password" type="password" style="width: 50%"/>
                </el-form-item>
                <el-form-item label="角色" label-width="15%">
                    <el-select v-model="addForm.roleId" placeholder="请选择角色">
                        <el-option v-for="item in this.$store.state.role" :label=item.role_name :value=item.role_id />
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelAdd" style="margin-right: 10px">取 消</el-button>
                <el-button type="primary" @click="addUser" style="margin-right: 30px">确 定</el-button>
            </div>
        </el-dialog>

        <!-- Update Form -->
        <el-dialog title="修改账号" :visible.sync="updateFormVisible">
            <el-form :model="updateForm">
                <el-form-item label="账号" label-width="15%" v-if="false">
                    <el-input v-model="updateForm.account" style="width: 50%" disabled/>
                </el-form-item>
                <el-form-item label="姓名" label-width="15%">
                    <el-input v-model="updateForm.name" style="width: 50%"/>
                </el-form-item>
                <el-form-item label="密码" label-width="15%">
                    <el-input v-model="updateForm.password" type="password" style="width: 50%"/>
                </el-form-item>
                <el-form-item label="确认密码" label-width="15%">
                    <el-input v-model="updateForm.checkPass" type="password" style="width: 50%"/>
                </el-form-item>
                <el-form-item label="角色" label-width="15%">
                    <el-select v-model="updateForm.roleId" placeholder="请选择角色">
                        <el-option v-for="item in this.$store.state.role" :label=item.role_name :value=item.role_id />
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelUpdate" style="margin-right: 10px">取 消</el-button>
                <el-button type="primary" @click="updateUser" style="margin-right: 30px">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "index",
        inject: ['reload'],
        data() {
            return {
                addFormVisible: false,
                updateFormVisible: false,
                addForm: {
                    account: '',
                    name: '',
                    password: '',
                    roleId: ''
                },
                updateForm: {
                    user_id: '',
                    name: '',
                    password: '',
                    checkPass: '',
                    roleId: ''
                }
            }
        },
        methods: {
            refresh() {
                this.reload()
            },
            getAllUserInfoAndRole() {
                // 获取全部的账号信息和对应的角色
                this.$axios({
                    method: "get",
                    url: "/userController/getAllUserInfoAndRole",
                    params: {}
                }).then(response => {
                    this.$store.commit("setAllUser",response.data);
                }).catch(error => {
                    console.log(error)
                })
            },
            getAllRole() {
                // 获取全部的角色
                this.$axios({
                    method: "get",
                    url: "/roleController/getAllRole"
                }).then(response => {
                    this.$store.commit("setAllRole",response.data);
                }).catch(error => {
                    console.log(error)
                })
            },
            addUser() {
                this.$axios({
                    method: "get",
                    url: "/userController/addUser",
                    params: {
                        name: this.addForm.name,
                        account: this.addForm.account,
                        password: this.addForm.password,
                        roleId: this.addForm.roleId
                    }
                }).then(() => {
                    this.addFormVisible = false;
                    this.refresh();
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    });
                }).catch(error => {
                    console.log(error)
                });
            },
            cancelAdd() {
                this.addFormVisible = false;
                this.refresh();
                this.$message({
                    type: 'info',
                    message: '已取消添加'
                })
            },
            delUser(user_id) {
                this.$axios({
                    method: "get",
                    url: "/userController/delUser",
                    params: {
                        user_id: user_id
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            delClick(user_id) {
                this.$confirm('将删除此账号, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delUser(user_id);
                    this.refresh();
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            updateUser() {
                this.$axios({
                    method: "get",
                    url: "/userController/updateUser",
                    params: {
                        user_id: this.updateForm.user_id,
                        name: this.updateForm.name,
                        password: this.updateForm.password,
                        roleId: this.updateForm.roleId
                    }
                }).then(() => {
                    this.updateFormVisible = false;
                    this.refresh();
                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    })
                }).catch(error => {
                    console.log(error)
                })
            },
            cancelUpdate() {
                this.updateFormVisible = false;
                this.refresh();
                this.$message({
                    type: 'info',
                    message: '已取消修改'
                })
            },
            updateClick(user) {
                this.updateFormVisible = true;
                this.updateForm.user_id = user.user_id;
                this.updateForm.name = user.user_name;
            }
        },
        mounted() {
            this.getAllUserInfoAndRole();
            this.getAllRole();
        }
    }
</script>

<style scoped>
    .title {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        color: #409EFF;
        font-size: 20px;
        font-weight: bold;
        height: 80px;
        line-height: 80px;
        padding-left: 20px;
        margin-bottom: 20px;
    }
</style>